<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../index.css">
</head>
<body>
    <pre>
    <h4>HTML5事件</h4>
    1.contextmenu  鼠标右键点击事件
    2.readystatechange  判断script link标签是否加载完成
    3.hash,hashchange
        hash即URL中#后面的部分，hash值改变不会导致页面重新加载，不会随请求发送到服务端，通过window.location.hash获取和设置hash值
        hashchange：当hash值改变时触发hashchange，事件对象有hash改变前的url改变后的url两个属性
    <h4>HTML5脚本</h4>
        1.跨文档消息传输(XDM)，核心PostMessage
        2.媒体元素
        3.浏览器状态管理history
    <h4>HTML5存储</h4>
        1.sessionStorage  容量2MB左右，页面关闭清空
        2.localStorage  容量2MB左右，页面关闭不会清空
        3.浏览器状态管理history  
        html5之外的存储技术：
            cookie(存储在客户端，可以由客户端或者服务端生成，在客户端和服务端之间传输数据，大小上限4KB) 
            indexDB(大小上限5MB)
            cachStorage(serviceWorker) 
        API: 
        sessionStorage/localStorage.setItem(key,value);  或者 sessionStorage/localStorage[key] = value;
        sessionStorage/localStorage.getItem(key);  或者  sessionStorage/localStorage[key]
        sessionStorage/localStorage.removeItem(key);
        sessionStorage/localStorage.clear();
    <h4>HTML5 Javascript API</h4>
        requestAnimationFrame

        Web Worker
    </pre>
    <script>
        //readystatechange  判断script标签是否加载完成
        const script = document.createElement('script')
        script.addEventListener('readystatechange', function eventListener(event) {
            alert(0)
        if (event.readyState === 'loaded' || event.readyState === 'complete') { // hack 的手段，浏览器自身的问题
            script.removeEventListener('readystatechange', eventListener)
        }
        })

        script.src = 'example.js'
        document.body.appendChild(script)
        
        //hashchange
        window.addEventListener("hashchange",function(e){
            console.log(e.oldURL)
            console.log(e.newURL)

        })
        localStorage['name'] = 'zhangqianfeng';
        sessionStorage['age'] = '18';

    </script>
</body>
</html>